<template>
    <div>
        <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            menu-trigger="click"
            mode="horizontal"
            @select="handleSelect"
        >
                <el-menu-item index="1" v-if="item.meta.level==1" v-for="(item,index) in listData" :key="index">
                    <router-link :to="{name:item.name}">{{item.meta.name}}</router-link>
                </el-menu-item>
                <el-submenu index="2" v-if="item.meta.level==2" v-for="(item,index) in listData" :key="index">
                    <template slot="title">{{item.meta.name}}</template>
                    <el-menu-item :index='"2-"+(indexs+1)' v-for="(children,indexs) in item.children" :key="indexs">
                        <router-link :to="{name:children.name}">{{children.meta.name}}</router-link>
                    </el-menu-item>
                </el-submenu>
        </el-menu>
        <router-view></router-view>
    </div>
</template>

<script>
import collection from '@/router/collection'
export default {
    data(){
        return {
            activeIndex:'1',
            listData : collection[0].children
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        }
    },
    created(){
        console.log(this.listData)
    }
}
</script>

<style scoped>
ul li a{
    color:#333;
    text-decoration: none;
    display: block;
}
</style>